import { Row, Col, Carousel, Image, Empty } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

const campusActivity = {
  data: {
    result: [
      {
        id: 1,
        title: '我最棒',
        url: 'https://demo-assets.iwisesoft.com/class_culture/best.jpg',
        type: 'image',
      },
      {
        id: 2,
        title: '狗狗被乌鸦欺负了',
        url: 'https://demo-assets.iwisesoft.com/class_culture/dog.mp4',
        type: 'media',
      },
      {
        id: 3,
        title: '创意书签展',
        url: 'https://demo-assets.iwisesoft.com/class_culture/bookmark.jpg',
        type: 'image',
      },
      {
        id: 4,
        title: '西域少女',
        url: 'https://demo-assets.iwisesoft.com/class_culture/beauty.mp4',
        type: 'media',
      },
      {
        id: 5,
        title: '向日葵',
        url: 'https://demo-assets.iwisesoft.com/class_culture/wallpaper.jpg',
        type: 'image',
      },
    ],
  },
};
export default () => {
  return (
    <div
      className={classNames('campus-activity-wrapper', styles.wrapper)}
      style={{ display: 'flex' }}
    >
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span style={{ marginLeft: 10 }}>校园动态</span>
          </Row>
        </Col>
        <Col id="campus_activity_medium_slider" flex="auto" style={{ padding: '10px 0 40px 0' }}>
          {campusActivity.data?.result?.length ? (
            <Image.PreviewGroup>
              <Carousel
                autoplay
                autoplaySpeed={5000}
                dotPosition="bottom"
                afterChange={(current) => {
                  if (campusActivity.data?.result?.[current]?.type === 'media') {
                    const videoEl = document.querySelector(
                      `#campus_activity_medium_slider div[data-index="${current}"] video`,
                    );
                    if (videoEl) {
                      setTimeout(() => {
                        // 延迟0.5秒播放
                        const isPlaying =
                          videoEl.currentTime > 0 &&
                          !videoEl.paused &&
                          !videoEl.ended &&
                          videoEl.readyState > videoEl.HAVE_CURRENT_DATA;

                        if (!isPlaying) {
                          videoEl.play();
                        }
                      }, 500);
                    }
                  }
                }}
                beforeChange={(from) => {
                  if (campusActivity.data?.result?.[from]?.type === 'media') {
                    const videoEl = document.querySelector(
                      `#campus_activity_medium_slider div[data-index="${from}"] video`,
                    );

                    if (videoEl) {
                      const isPlaying =
                        videoEl.currentTime > 0 &&
                        !videoEl.paused &&
                        !videoEl.ended &&
                        videoEl.readyState > videoEl.HAVE_CURRENT_DATA;

                      if (isPlaying) {
                        videoEl.pause();
                      }
                    }
                  }
                }}
              >
                {campusActivity.data?.result?.map((x, i) => {
                  if (x.type === 'image') {
                    return (
                      <div key={x.id}>
                        <div className={styles.mediaWrapper}>
                          <Image width="100%" src={x.preview || x.url} preview={{ src: x.url }} />
                          <div className={styles.mediaTitle}>
                            <h1>{x.title}</h1>
                          </div>
                        </div>
                      </div>
                    );
                  }
                  return (
                    <div key={x.id}>
                      <div className={styles.mediaWrapper}>
                        <video
                          width="100%"
                          src={x.url}
                          loop="loop"
                          muted="muted"
                          onDoubleClick={(e) => {
                            const vid = e.target;
                            if (vid.requestFullScreen) {
                              vid.requestFullScreen();
                            } else if (vid.webkitRequestFullScreen) {
                              vid.webkitRequestFullScreen();
                            } else if (vid.mozRequestFullScreen) {
                              vid.mozRequestFullScreen();
                            }
                          }}
                        />
                        <div className={styles.mediaTitle}>
                          <h1>{x.title}</h1>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </Carousel>
            </Image.PreviewGroup>
          ) : (
            <Empty description="没有找到相关活动，快去添加一些吧！" />
          )}
        </Col>
      </Row>
    </div>
  );
};
